<template>
  <div>
    <el-card shadow="never" class="card">
      <el-form ref="form" :model="page">
        <el-form-item label="商品类型搜索：">
          <el-input v-model="page.skuName" class="elinput1" clearable placeholder="请输入" />
          <el-button type="primary" class="inquire" icon="el-icon-search" size="small" @click="inquire">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-button class="btn1" size="small" icon="el-icon-circle-plus-outline" @click="addList">新建</el-button>
      <el-button class="btn2" size="small" @click="bulkOperations">导入数据</el-button>
      <el-table
        :data="queryList"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" />
        <el-table-column
          prop="skuName"
          label="商品名称"
          width="280"
        />
        <el-table-column
          prop="skuImage"
          label="商品图片"
        >
          <template #default="{row}">
            <img :src="row.skuImage" alt="" class="imgs">
          </template>
        </el-table-column>
        <el-table-column
          prop="brandName"
          label="品牌"
        />
        <el-table-column
          prop="unit"
          label="规格"
        />
        <el-table-column
          prop="jiage"
          label="商品价格"
        />
        <el-table-column
          prop="skuClass.className"
          label="商品类型"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
        />
        <el-table-column label="操作" width="100">
          <template #default="{row }">
            <el-link type="primary" @click="editList(row)">修改</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pageIndex"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 添加 -->
    <el-dialog
      title="新增商品"
      :visible.sync="addDialog"
      width="40%"
    >
      <el-form ref="ruleForm" :model="addFrom" :rules="addrules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称：" prop="skuName">
          <el-input
            v-model="addFrom.skuName"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="品牌：" prop="skuName">
          <el-input
            v-model="addFrom.brandName"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品价格：" prop="num">
          <el-input-number
            v-model="num"
            controls-position="right"
            :min="0.5"
            :precision="2"
            :step="0.5"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item label="商品类型：" prop="classId">
          <el-select v-model="addFrom.classId" placeholder="请输入">
            <el-option
              v-for="item in productType"
              :key="item.classId"
              :label="item.className"
              :value="item.classId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="规格：" prop="unit">
          <el-input
            v-model="addFrom.unit"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品图片：" prop="skuImage">
          <UploadIng @imgUrl="imgUrl" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmTheAddition">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="新增商品"
      :visible.sync="editDialog"
      width="40%"
    >
      <el-form ref="ruleForm" :model="editFrom" :rules="editrules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品名称：" prop="skuName">
          <el-input
            v-model="editFrom.skuName"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="品牌：" prop="skuName">
          <el-input
            v-model="editFrom.brandName"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品价格：" prop="num">
          <el-input-number
            v-model="num"
            controls-position="right"
            :min="0.5"
            :precision="2"
            :step="0.5"
            placeholder="请选择"
          />
        </el-form-item>
        <el-form-item label="商品类型：" prop="classId">
          <el-select v-model="editFrom.classId" placeholder="请输入">
            <el-option
              v-for="item in productType"
              :key="item.classId"
              :label="item.className"
              :value="item.classId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="规格：" prop="unit">
          <el-input
            v-model="editFrom.unit"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="商品图片：" prop="skuImage">
          <UploadIng v-model="editFrom.skuImage" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="determineTheModifications">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { merchandiseManagementAPI, productTypeAPI, addProducts, editAPI } from '@/api/sku.js'
export default {
  data() {
    return {
      page: {
        skuName: '',
        pageIndex: 1,
        pageSize: 10
      },
      queryList: [],
      totalCount: null,
      addDialog: false,
      editDialog: false,
      addFrom: {
        // 商品名称
        skuName: '',
        // 商品品牌
        brandName: '',
        // 价格
        price: null,
        // 容量
        unit: null,
        // 商品类型id
        classId: null,
        skuImage: ''
      },
      isId: null,
      editFrom: {
        // 商品名称
        skuName: '',
        // 商品品牌
        brandName: '',
        // 价格
        price: null,
        // 容量
        unit: null,
        // 商品类型id
        classId: null,
        skuImage: ''
      },
      num: undefined,
      addrules: {
        skuName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        brandName: [
          { required: true, message: '请输入品牌', trigger: 'blur' }
        ],
        num: [
          { required: false, message: '请输入价格', trigger: 'blur' }
        ],
        classId: [
          { required: true, message: '请输入类型', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入规格', trigger: 'blur' }
        ]
      },
      editrules: {
        skuName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        brandName: [
          { required: true, message: '请输入品牌', trigger: 'blur' }
        ],
        num: [
          { required: false, message: '请输入价格', trigger: 'blur' }
        ],
        classId: [
          { required: true, message: '请输入类型', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入规格', trigger: 'blur' }
        ]
      },
      productType: [],
      // 图片上传
      coverImg: ''
    }
  },
  created() {
    this.getmerchandiseManagementAPI()
  },
  methods: {
    inquire() {
      this.getmerchandiseManagementAPI()
    },
    // 新建
    async  addList() {
      const res = await productTypeAPI()
      console.log(res)
      this.productType = res.currentPageRecords
      this.addDialog = true
    },
    confirmTheAddition() {
      // validate
      this.$refs.ruleForm.validate(async(valid) => {
        if (!valid) return
        this.addFrom.price = this.num * 100
        console.log(this.addFrom)
        await addProducts(this.addFrom)
        this.$message.success('添加成功！')
        this.getmerchandiseManagementAPI()
        this.addDialog = false
      })
    },
    bulkOperations() {

    },
    async getmerchandiseManagementAPI() {
      const res = await merchandiseManagementAPI(this.page)
      console.log(res)
      this.queryList = res.currentPageRecords
      this.totalCount = res.totalCount - 0
      this.queryList.forEach(item => {
        item.jiage = `${(item.price / 100).toFixed(2)} ¥`
        item.createTime = item.createTime.replace(/T/g, ' ')
      })
    },
    // 分页逻辑
    handleSizeChange(newSize) {
      this.page.pageSize = newSize
      this.getmerchandiseManagementAPI()
    },
    handleCurrentChange(newNum) {
      this.page.pageIndex = newNum
      this.getmerchandiseManagementAPI()
    },
    imgUrl(val) {
      console.log(val)
      this.addFrom.skuImage = val
    },
    // 修改
    async   editList(row) {
      console.log(row)
      const res = await productTypeAPI()
      this.productType = res.currentPageRecords
      this.editFrom.skuName = row.skuName
      this.editFrom.brandName = row.brandName
      this.num = row.price / 100
      this.editFrom.price = this.num * 100
      this.editFrom.unit = row.unit
      this.editFrom.skuImage = row.skuImage
      this.editFrom.classId = row.skuClass.classId
      this.isId = row.classId
      this.editDialog = true
    },
    // 确定修改
    async  determineTheModifications() {
      await editAPI(this.isId, this.editFrom).catch(err => this.$message.error(err.response.data))
      this.$message.success('修改成功！')
      this.editDialog = false
      this.getmerchandiseManagementAPI()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 15px;
  height: 85px;

}
.el-btn {
  margin-bottom: 15px;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  color: #fff;
  height: 36px;
}
.elinput1{
  width: 200px;
   height: 30px;
   line-height: 20px;
   margin-right: 20px;
   ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
   }
}
.inquire{
  background-color: #5f84ff !important;
  height: 30px;
  // width: 70px;
}
.btn1{
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
    color: #fff;

}
.btn2{
  width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    height: 30px;
}
.imgs{
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background: rgb(243, 246, 251);
    border: 1px solid rgb(243, 246, 251);
}
.el-input-number{
  width: 100%;
}
.el-select {
  width: 100%;
}
</style>
